<template>
	<view class="files">
		<view class="fileinfo">
			<view class="submeida">
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem file" @click="btnclick('file')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.selectFile')}}</view>
				</view>
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem photo" @click="btnclick('camera')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.photosVideos')}}</view>
				</view>
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem audio" @click="btnclick('audio')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.recording')}}</view>
				</view>
			</view>

			<view class="divide"></view>

			<view>
				<file-list :files="attachFiles" :source="source" :hasdeleted="hasdeleted" :emitkey="emitkeyDel"
					@modifyName="fileModifyName"></file-list>
			</view>
		</view>
	</view>
</template>

<script>
	import FileList from "./file-list.vue"
	import { file } from '@/utils/common.js'

	export default {
		props: {
			file: {
				type: String,
				default: ''
			},
			files: {
				type: Array,
				default () {
					return []
				}
			},
			hasdeleted: {
				type: Boolean,
				default: false
			},
			emitkey: {
				type: String,
				default: ''
			},
			source: {
				type: Object,
				default() {
					return null
				}
			}
		},
		components: {
			FileList
		},
		watch: {
			file: {
				handler(value) {
					if(value) {
						this.attachFiles = JSON.parse(value)
					}
				},
				immediate: true
			},
			files: {
				handler(value) {
					if(value) {
						this.attachFiles = value
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				attachFiles: [],
				emitkeyAdd: this.emitkey + '_add',
				emitkeyDel: this.emitkey + '_del'
			}
		},
		mounted() {
			this.attachFiles = this.files.length > 0 ? this.files : this.file ? JSON.parse(this.file) : []
		},
		methods: {
			btnclick(type) {
				const _this = this
				if (type == "file") {
					uni.chooseImage({
					    sizeType: ['original'],
					    sourceType: ['album'],
					    success: function (res) {
							let images = res.tempFilePaths
							for(var i in images) {
								file.compressImage(images[i], 50, imgUrl => {
									_this.uploadFile(imgUrl)
								})
							}
					    }
					});
				} else if (type == "camera") {
					// #ifdef APP-PLUS
					const camera = plus.camera.getCamera();
					// #endif
					uni.showActionSheet({
						itemList: [_this.$t('baseCommon.buttons.photo'), _this.$t('baseCommon.buttons.video')],
						success: function(res) {
							if (res.tapIndex === 0) { //拍照
								var resolution = camera.supportedImageResolutions[0];
								var format = camera.supportedImageFormats[0];
								camera.captureImage(function(path) {
									file.compressImage(path, 50, imgUrl => {
										_this.uploadFile(imgUrl)
									})
								}, function(error) {
									console.log("Capture image failed: " + error.message);
								}, {
									resolution: resolution,
									format: format
								});
							} else { //录像
								var resolution = camera.supportedVideoResolutions[0];
								var format = camera.supportedVideoFormats[0];
								camera.startVideoCapture(function(path) {
									file.compressVideo(path, url => {
										_this.uploadFile(url)
									})
								}, function(error) {
									console.log("Capture video failed: " + error.message);
								}, {
									resolution: resolution,
									format: format
								});
							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				} else if (type == "audio") {
					uni.navigateTo({
						url: "/pages/base/voice-business?emitkey=" + _this.emitkeyAdd + "&source="+JSON.stringify(_this.source)
					})
				}
			},
			async uploadFile(item) {
				const _this = this
				file.uploadFile(item, []).then(res => {
					const addFile = {
						"id": res.id,
						"name": res.fileName,
						"ext": res.ext,
						"fileType": file.getFileType(res),
						"size": res.totalBytes
					}
					if(_this.source) {
						let data = {
							source: _this.source,
							addFile: addFile
						}
						uni.$emit(_this.emitkeyAdd, data)
					} else {
						uni.$emit(_this.emitkeyAdd, addFile)
					}
				})
			},
			fileModifyName(data) {
				if(this.source) {
					this.$emit("modifyName", data, this.source)
				} else {
					this.$emit("modifyName", data)
				}
			}
		}
	}
</script>

<style>
	.files {
		/* padding: 0 16rpx; */
	}

	.fileinfo {
		background-color: #FFFFFF;
		/* padding: 0 20rpx; */
	}

	.submeida {
		width: 100%;
		display: flex;
		padding-bottom: 15px;
	}

	.medialine {
		flex: 1;
		text-align: center;
	}
	
	.mediaarea {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #EFEFEF;
		margin: 0 auto;
		padding: 10px;
	}

	.mediaitem {
		width: 30px;
		height: 30px;
		padding: 5px;
	}
	
	.mediatext {
		font-size: 14px;
		color: #333333;
		padding-top: 8px;
	}

	.file {
		background: url(../../../static/images/icon/folder.png) no-repeat center center;
		background-size: 100% 100%;
	}

	.photo {
		background: url(../../../static/images/icon/camera.png);
		background-size: 100% 100%;
	}

	.audio {
		background: url(../../../static/images/icon/microphone.png);
		background-size: 100% 100%;
	}

	.divide {
		border-top: solid 1px #EFEFEF;
	}
</style>
